$num: 0; // padding、margin

.default {
  color: #606266 !important;
}

.success {
  color: #67c23a !important;
}

.warning {
  color: #e6a23c !important;
}

.danger {
  color: #f56c6c !important;
}

.info {
  color: #909399 !important;
}

.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

@while $num <=60 {
  .p-#{$num} {
    padding: #{$num}px !important;
  }

  .pt-#{$num} {
    padding-top: #{$num}px !important;
  }

  .pb-#{$num} {
    padding-bottom: #{$num}px !important;
  }

  .pl-#{$num} {
    padding-left: #{$num}px !important;
  }

  .pr-#{$num} {
    padding-right: #{$num}px !important;
  }

  .px-#{$num} {
    padding-left: #{$num}px !important;
    padding-right: #{$num}px !important;
  }

  .py-#{$num} {
    padding-top: #{$num}px !important;
    padding-bottom: #{$num}px !important;
  }

  .m-#{$num} {
    margin: #{$num}px !important;
  }

  .mt-#{$num} {
    margin-top: #{$num}px !important;
  }

  .mb-#{$num} {
    margin-bottom: #{$num}px !important;
  }

  .ml-#{$num} {
    margin-left: #{$num}px !important;
  }

  .mr-#{$num} {
    margin-right: #{$num}px !important;
  }

  .mx-#{$num} {
    margin-left: #{$num}px !important;
    margin-right: #{$num}px !important;
  }

  .my-#{$num} {
    margin-top: #{$num}px !important;
    margin-bottom: #{$num}px !important;
  }

  $num: $num + 5;
}

$pos: -20; // top、left、right、bottom

@while $pos <=20 {
  .top-#{$pos} {
    top: #{$pos}px !important;
  }

  .bottom-#{$pos} {
    bottom: #{$pos}px !important;
  }

  .left-#{$pos} {
    left: #{$pos}px !important;
  }

  .right-#{$pos} {
    right: #{$pos}px !important;
  }

  $pos: $pos + 5;
}

$spacing: 0; // width-px、height-px

@while $spacing <=100 {
  .w--#{$spacing} {
    width: #{$spacing}px !important;
  }

  .h--#{$spacing} {
    height: #{$spacing}px !important;
  }

  $spacing: $spacing + 5;
}

$percentage: 0; // width-%、height-%

@while $percentage <=100 {
  .w--#{$percentage}\% {
    width: #{$percentage + '%'} !important;
  }

  .h--#{$percentage}\% {
    height: #{$percentage + '%'} !important;
  }

  $percentage: $percentage + 5;
}

// z-index
$zindex: 1;

@while $zindex <=100 {
  .zIndex-#{$zindex} {
    z-index: #{$zindex} !important;
  }

  $zindex: $zindex + 5;
}

.w--unset {
  width: unset !important;
}

.font-style {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

html,
body {
  height: 100% !important;
}

.fr {
  float: right !important;

  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

.fl {
  float: left !important;

  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-xl {
  font-size: 20px;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.select-none {
  user-select: none !important;
}

.w-full {
  width: 100% !important;
}

.h-full {
  height: 100% !important;
}

.w--full {
  width: 100% !important;
}

.h--full {
  height: 100% !important;
}

.relative {
  position: relative !important;
}

.absolute {
  position: absolute !important;
}

.fixed {
  position: fixed !important;
}

.flex {
  display: flex !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.hidden {
  display: none !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.justify-center {
  justify-content: center !important;
}

.self-center {
  align-self: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.justify-evenly {
  justify-content: space-evenly !important;
}

.items-baseline {
  align-items: baseline !important;
}

.items-center {
  align-items: center !important;
}

.items-stretch {
  align-items: stretch !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.before-top {
  &::before {
    content: '';
    display: inline-block;
    vertical-align: top;
    height: 100%;
  }
}

.before-middle {
  &::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
}

.before-bottom {
  &::before {
    content: '';
    display: inline-block;
    vertical-align: bottom;
    height: 100%;
  }
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-y {
  overflow-y: scroll !important;
}

.overflow-x {
  overflow-x: scroll !important;
}

.rounded-none {
  border-radius: 0 !important;
}

.rounded-sm {
  border-radius: 2px !important;
}

.rounded {
  border-radius: 4px !important;
}

.rounded-md {
  border-radius: 6px !important;
}

.rounded-lg {
  border-radius: 8px !important;
}

.rounded-xl {
  border-radius: 12px !important;
}

.rounded-2xl {
  border-radius: 16px !important;
}

.rounded-3xl {
  border-radius: 24px !important;
}

.rounded-full {
  border-radius: 99999px !important;
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.shadow-md {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}

.shadow-none {
  box-shadow: 0 0 #0000;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  @at-root .gap {
    gap: 4px !important;
  }

  @at-root .gap-2 {
    gap: 8px !important;
  }

  @at-root .gap-3 {
    gap: 12px !important;
  }

  .grid-item-1 {
    grid-area: auto / span 1 !important;
  }

  .grid-item-2 {
    grid-area: auto / span 2 !important;
  }

  .grid-item-3 {
    grid-area: auto / span 3 !important;
  }

  .grid-item-4 {
    grid-area: auto / span 4 !important;
  }

  .grid-item-5 {
    grid-area: auto / span 5 !important;
  }

  .grid-item-6 {
    grid-area: auto / span 6 !important;
  }

  .grid-item-7 {
    grid-area: auto / span 7 !important;
  }

  .grid-item-8 {
    grid-area: auto / span 8 !important;
  }

  .grid-item-9 {
    grid-area: auto / span 9 !important;
  }

  .grid-item-10 {
    grid-area: auto / span 10 !important;
  }

  .grid-item-11 {
    grid-area: auto / span 11 !important;
  }

  .grid-item-12 {
    grid-area: auto / span 12 !important;
  }
}
